<template>
  <section class="main">
    <ul class="todo-list" id="todo-list">
      <!-- li默认是未完成状态
        li的类名如果设置为completed，则是完成状态  -->
      <li class="">
        <div class="view">
          <input class="toggle" type="checkbox" />
          <label>吃饭</label>
          <button class="destroy"></button>
        </div>
      </li>
      <li class="completed">
        <div class="view">
          <input class="toggle" type="checkbox" checked />
          <label>睡觉</label>
          <button class="destroy"></button>
        </div>
        <input class="edit" />
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped></style>
